---
layout: default
title: 百川UX
favicon: http://img.alicdn.com/tps/i2/TB1zJ10GXXXXXb3XFXX6EM7JVXX-96-96.ico
---
<div class="page-baichuan">
  <div class="nav">
    <ul class="tabs clearfix">
      <li class='active'><a href="#" style='padding: 0;'><img src="http://gtms02.alicdn.com/tps/i2/TB1bPkoIpXXXXcXaXXX9i6KGpXX-160-79.png" alt=""></a></li>
      <li><a href="#">设计指南&资源</a></li>
    </ul>
  </div>
  <div class="header">
    <div class="bg"></div>
    <div class="overlay"></div>
    <h2>
      APP 设计指南及资源
    </h2>
  </div>
  <div class="sub-header">
    <h2>设计文档</h2>
    <p>设计指导文档，包括应用信息结构、交互、视觉指导</p>
  </div>
  <div class="share">
    <h2>分享会资料</h2>
    <ul>
      <li>
        <a class="img" href='http://bcdesign.file.alimmdn.com/%E5%88%86%E4%BA%AB%E8%AF%BE%E4%BB%B6/003%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E5%92%8C%E8%AE%BE%E8%AE%A1%E5%88%9B%E6%96%B0_paul%E7%99%BE%E5%B7%9D%E5%A4%A7%E4%BC%9A.pdf?t=1437449344000' target="_blank">
          <img src="//gtms04.alicdn.com/tps/i4/TB1DZZoIFXXXXbgXpXXREHX3FXX-222-125.png" alt="">
          <div class="overlay"><div class="download">下载</div></div>
        </a>
        <div class="description">
          <h4>《用户体验与创新》</h4>
          <p>阿里巴巴国际UED Director Paul</p>
        </div>
      </li>
      <li>
        <a class="img" href='http://bcdesign.file.alimmdn.com/%E5%88%86%E4%BA%AB%E8%AF%BE%E4%BB%B6/004%E5%9F%BA%E4%BA%8Esensors%E7%9A%84%E7%A7%BB%E5%8A%A8%E5%88%9B%E6%96%B0%E8%AE%BE%E8%AE%A1_%20mobile%20ux%E5%A4%8F%E8%99%AB20150716%E7%99%BE%E5%B7%9D%E5%88%86%E4%BA%AB.pdf?t=1437449345000' target="_blank">
          <img src="//gtms02.alicdn.com/tps/i2/TB1nXInIFXXXXbVXpXXREHX3FXX-222-125.png" alt="">
          <div class="overlay"><div class="download">下载</div></div>
        </a>
        <div class="description">
          <h4>《基于Sensor的移动创新设计》</h4>
          <p>阿里百川交互设计专家 夏虫</p>
        </div>
      </li>
      <li>
        <a class="img" href='http://bcdesign.file.alimmdn.com/%E5%88%86%E4%BA%AB%E8%AF%BE%E4%BB%B6/005%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%95%B0%E6%8D%AE%E5%8C%96%E8%AE%BE%E8%AE%A1-%E4%B9%90%E4%B9%98.pdf?t=1437449350000' target="_blank">
          <img src="//gtms01.alicdn.com/tps/i1/TB1X0QdIFXXXXbaXVXXREHX3FXX-222-125.png" alt="">
          <div class="overlay"><div class="download">下载</div></div>
        </a>
        <div class="description">
          <h4>《移动产品的数据化设计》</h4>
          <p>手机淘宝设计专家 乐乘</p>
        </div>
      </li>
      <li>
        <a class="img" href='http://bcdesign.file.alimmdn.com/%E5%88%86%E4%BA%AB%E8%AF%BE%E4%BB%B6/006%E4%BA%A7%E5%93%81%E8%AE%BE%E8%AE%A1%E9%A9%AC%E5%8A%9B%2016%EF%BC%9A9.pdf?t=1437449352000' target="_blank">
          <img src="//gtms01.alicdn.com/tps/i1/TB1qxApIFXXXXabXpXXREHX3FXX-222-125.png" alt="">
          <div class="overlay"><div class="download">下载</div></div>
        </a>
        <div class="description">
          <h4>《移动产品设计:将体验转化为价值》</h4>
          <p>最美应用的CEO 马力</p>
        </div>
      </li>
    </ul>
  </div>
  <div class="design" style='display: none;'>
    <h2>常用原型工具设计模板库</h2>
    <ul class="design-resources">
      <li>
        <a href="#">
          <span class='icon'>.RP</span>
          <div class="contents">
            <h4>Axure模板</h4>
            <p>图标和组件模板下载</p>
          </div>
        </a>
      </li>
      <li style='display: none;'>
        <a href="#">
          <span class='icon'>.RP</span>
          <div class="contents">
            <h4>Visio模板</h4>
            <p>图标和组件模板下载</p>
          </div>
        </a>
      </li>
    </ul>
  </div>
  <div class="sub-header" id='h5'>
    <h2>H5 组件(MSUI)</h2>
    <p>轻量，小巧且精美的UI库，方便迅速搭建手机H5应用</p>
  </div>
  <div>
    <article>
      <div class="article-inner">
        <div class="monitor">
          <div class="phone">
            <img src='//gtms01.alicdn.com/tps/i1/TB1n4yjIFXXXXXOXpXXLIffVVXX-640-1136.png' />
            <div class="indicator"></div>
          </div>
        </div>
        <div class="text">
          <h4>登录案例</h4>
          <p>由
            <a class='trigger' href='http://m.sui.taobao.org/components/#bars' target='_blank' data-position='[14,62,200,31]'>标题栏</a>、
            <a class='trigger' href='http://m.sui.taobao.org/components/#forms' target='_blank' data-position='[14,97,200,57]'>表单</a>、
            <a class='trigger' href='http://m.sui.taobao.org/components/#buttons' target='_blank' data-position='[22, 162, 184, 28]'>按钮</a>、
            <a class='trigger' href='http://m.sui.taobao.org/components/#icons' target='_blank' data-position='[22, 260, 184, 64]'>图标</a>
            等组件组成</p>
          <p>
            <div class="text-gray">你也可以扫描下方二维码在手机上查看</div>
            <p>
              <img class='code' src="//gtms04.alicdn.com/tps/i4/TB1w_MSIpXXXXXJXXXXlA60ZpXX-179-179.png" alt="">
            </p>
          </p>
        </div>
      </div>
    </article>
    <article>
      <div class="article-inner">
        <div class="monitor">
          <div class="phone">
            <img src="//gtms01.alicdn.com/tps/i1/TB1AL4LIFXXXXXnaXXXLIffVVXX-640-1136.png" alt="">
            <div class="indicator"></div>
          </div>
        </div>
        <div class="text">
          <h4>首页案例</h4>
          <p>由
            <a class='trigger' href='http://m.sui.taobao.org/components/#bars' target='_blank' data-position='[14,62,200,31]'>标题栏</a>、
            <a class='trigger' href='http://m.sui.taobao.org/components/#cards' target='_blank' data-position='[19,93,190,223]'>卡片</a>、
            <a class='trigger' href='http://m.sui.taobao.org/components/#toolbar' target='_blank' data-position='[14,368,200,31]'>工具栏</a>、
            <a class='trigger' href='http://m.sui.taobao.org/components/#popup' target='_blank' data-position='[165,62,49,31]'>popup</a>
            等组成</p>
          <p>
            <div class="text-gray">你也可以扫描下方二维码在手机上查看</div>
            <p>
              <img class='code' src="//gtms03.alicdn.com/tps/i3/TB1nxgvIpXXXXXUXVXXBALc0FXX-184-180.png" alt="">
            </p>
          </p>
        </div>
      </div>
    </article>
    <article>
      <div class="article-inner">
        <div class="monitor">
          <div class="phone">
            <img src="//gtms04.alicdn.com/tps/i4/TB1nPJ3IFXXXXbYXpXXLIffVVXX-640-1136.png" alt="">
            <div class="indicator"></div>
          </div>
        </div>
        <div class="text">
          <h4>商品详情案例</h4>
          <p>由
            <a class='trigger' href='http://m.sui.taobao.org/components/#bars' target='_blank' data-position='[14,62,200,31]'>标题栏</a>、
            <a class='trigger' href='http://m.sui.taobao.org/extends/#swiper' target='_blank' data-position='[14,89,200,126]'>幻灯片</a>、
            <a class='trigger' href='http://m.sui.taobao.org/components/#typography' target='_blank' data-position='[14,215,200,98]'>文案</a>、
            <a class='trigger' href='http://m.sui.taobao.org/components/#list' target='_blank' data-position='[14,312,200,28]'>列表</a>、
            <a class='trigger' href='http://m.sui.taobao.org/components/#tabs' target='_blank' data-position='[14,341,200,28]'>标签页</a>
            等组成</p>
          <p>
            <div class="text-gray">你也可以扫描下方二维码在手机上查看</div>
            <p>
              <img class='code' src="//gtms02.alicdn.com/tps/i2/TB1qbMMIpXXXXXsXpXX6U5lYVXX-181-179.png" alt="">
            </p>
          </p>
        </div>
      </div>
    </article>
    <article>
      <div class="article-inner">
        <div class="monitor">
          <div class="phone">
            <img src="//gtms02.alicdn.com/tps/i2/TB1VCx9IFXXXXcAXXXXLIffVVXX-640-1136.png" alt="">
            <div class="indicator"></div>
          </div>
        </div>
        <div class="text">
          <h4>商品列表</h4>
          <p>由
            <a class='trigger' href='http://m.sui.taobao.org/extends/#swiper' target='_blank' data-position='[14,63,200,126]'>幻灯片</a>、
            <a class='trigger' href='http://m.sui.taobao.org/components/#list' target='_blank' data-position='[14,207,200,166]'>列表</a>、
            <a class='trigger' href='http://m.sui.taobao.org/components/#toolbar' target='_blank' data-position='[14,368,200,31]'>工具栏</a>
            等组成</p>
          <p>
            <div class="text-gray">你也可以扫描下方二维码在手机上查看</div>
            <p>
              <img class='code' src="//gtms02.alicdn.com/tps/i2/TB1_1xUIFXXXXcSXFXXWZ0uWXXX-175-177.png" alt="">
            </p>
          </p>
        </div>
      </div>
    </article>
    <article>
      <div class="article-inner">
        <div class="monitor">
          <div class="phone">
            <img src="//gtms01.alicdn.com/tps/i1/TB1YI8_IFXXXXcgXXXXLIffVVXX-640-1136.png" alt="">
            <div class="indicator"></div>
          </div>
        </div>
        <div class="text">
          <h4>个人中心案例</h4>
          <p>由
            <a class='trigger' href='http://m.sui.taobao.org/components/#bars' target='_blank' data-position='[14,62,200,31]'>标题栏</a>、
            <a class='trigger' href='http://m.sui.taobao.org/components/#grid' target='_blank' data-position='[14,164,200,45]'>栅格</a>、
            <a class='trigger' href='http://m.sui.taobao.org/components/#list' target='_blank' data-position='[14,227,200,140]'>列表</a>、
            <a class='trigger' href='http://m.sui.taobao.org/components/#toolbar' target='_blank' data-position='[14,368,200,31]'>工具栏</a>
            等组成</p>
          <p>
            <div class="text-gray">你也可以扫描下方二维码在手机上查看</div>
            <p>
              <img class='code' src="//gtms01.alicdn.com/tps/i1/TB1NqkCIpXXXXaRXFXXHMY0ZpXX-179-178.png" alt="">
            </p>
          </p>
        </div>
      </div>
    </article>

  </div>
  <div class="footer-second">
    <p>使用百川H5组件快速搭建您自己的应用。</p>
    <p>
      <a class='btn' href='//m.sui.taobao.org' target='_blank'>立即使用</a>
    </p>
  </div>

  <div class="footer">
    <div class="wrap-inner">
      <div class="links">
        <a href="http://www.alibabagroup.com" target="_blank">阿里巴巴集团</a>
        <a href="http://www.aliyun.com" target="_blank">阿里云</a>
        <a href="http://www.net.cn" target="_blank">万网</a>
        <a href="//www.taobao.com" target="_blank">淘宝网</a>
        <a href="//www.tmall.com" target="_blank">天猫</a>
        <a href="http://www.etao.com" target="_blank">一淘</a>
        <a href="//ju.taobao.com" target="_blank">聚划算</a>
        <a href="//www.alipay.com" target="_blank">支付宝</a>
      </div>
      <div class="copyright">
        Copyright &nbsp;©2003-2015 &nbsp;Taobao.com
        <span>问题咨询&amp;更多建议：&nbsp; <a href="mailto:wtop@taobao.com">wtop@taobao.com</a></span>
      </div>
    </div>
  </div>
</div>

<script src='/assets/js/baichuan.js'></script>
